<template>
  <div>
    <div class="Logout">
      <Logout>退出</Logout>
    </div>
    <h1>更新家谱息</h1>
    <el-input size="medium" v-model="user.zno" placeholder="请输入家谱编号"></el-input>
    <el-button @click="search()" icon="el-icon-search" circle></el-button>
    <el-table  v-if="tableData"
      :data="tableData"
      border
      style="width: 100%">
      <template slot="empty" >
        <span style="font-size: 20px"></span>
      </template>
      <el-table-column
        prop="zno"
        label="家谱编号"
        width="120">
      </el-table-column>
      <el-table-column
        prop="zname"
        label="家谱名称"
        width="120">
      </el-table-column>
    
        <el-table-column
         prop="zlevel"
         label="家族成员等级"
         width="120">
        </el-table-column>

        <el-table-column
         prop="zcharacter"
         label="家族成员特长"
          width="120">
        </el-table-column>

    
     
    
      <el-table-column
        label="操作"
        width="120">
     
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">修改</el-button>
          <el-button @click="delZupu(scope.row)"  type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import Logout from "./Logout";
export default {
  name: "EditZupu",
  components:{Logout},
  created() {
    let  _this = this;
    console.log("即将打印全体家族成员")
    this.$axios.post(`/ShowZupu`).then((res) => {
      console.log(res.data);
      this.tableData = res.data;
      this.sta = true
      console.log("全部数据：", this.tableData)
    })
  },
  methods : {
    search(){
      let  _this = this;
      const parms = {
        zno: '',
        zname: '',
        zlevel: '',
       zcharacter: '',
      }
     
     this.sta = false


      this.$axios.post(`/ShowZupuSelect`, {...this.user}).then((res) => {
        console.log(res.data);
        _this.tableData = res.date
        this.sta = true

        console.log("找到的家族成员：", _this.tableData)
        //_this.tableData = String(res.data);//请求来的是对象，但是tableDate是数组类型
        //   _this.tableData += res.data.zno
        //   _this.tableData += res.date.zname
        //   _this.tableData += res.date.zlever
        //   _this.tableData += res.date.zcharacter
      })
    },
    handleClick(row) {
      console.log(row);
      const zno = row.zno;
      this.$router.push({path:'/UpdateZupu',query:{
          zno:zno,
          zname:row.zname,
          zlevel:row.zlever,
          zcharacter:row.zcharacter

        }});
    },
    delZupu(row) {
      console.log(row);
      const zno = row.zno;
      const  _this = this;
      this.$axios.get(`/ShowZupuDelete`).then((res) => {
        alert("删除成功");
        this.$axios.get(`/zupu/list?zno=${this.search_zno}`).then((res) => {
          console.log(res.data);
          _this.tableData = res.data;

        })

      })
    },
  },
  data () {
    return {
      user:{
        zno:this.search_zno,
        zname:'',
       zlevel:'',
       zcharacter:'',
      },
      sta:false,
      search_zno:'',
      tableData: null
    }
  }
}
</script>

<style scoped>

</style>
